
<!-- setup Vue 提供的语法糖，定义 UI 中即可使用 -->
<script setup lang="ts">
import { ref } from 'vue';
const pets =ref(['蟑螂','仓鼠','捕鸟蛛','猪鼻蛇','鬃狮蜥蜴','泥鳅'])

</script>

<!-- 结构 -->
<template>
  <h2>小黑宠物店</h2>
  <ul>
    <!-- <li v-for="(it,index) in pets" :key="index">
      {{  it  }} ---{{ index+1 }}
    </li> -->

    <!-- 下标用不上，可以省略不写 -->
    <li v-for="it in pets" :key="it">
      {{  it  }}
    </li>
  </ul>
</template>


<!-- 样式 -->
<style scoped>
  img{
    width: 200px;
    height: 200px;
  }
  .box{
    width: 100px;
    height: 100px;
    border:1px black solid;
  }
  .skyblue{
    background-color: skyblue;
  }
  .orange{
    border-color: orange;
    border-width: 10px;
  }
</style>
